<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增加节点</title>
		<style>
			#pics{
				border: 5px ridge red;
			}
		</style>
		<script>
			var ar=["../1-3/images/dog.jpg","../1-3/images/mai.jpg","../images/jixue.jpg","../images/kongzi.jpg"];
			//把数组中的照片添加到这个pics这个div中
			//加了第一张加第二张，到了最后一张，从1 开始
			function addPic(){
				let d=document.getElementById("pics");
				for (var i = 0; i < ar.length; i++) {
					let im=document.createElement("img");
					im.setAttribute("src",ar[i]);
					d.appendChild(im);
				}
			
				//d.innerHTML+=`<img src='${ar[0]}'/>`;
				//d.innerHTML+="<img src='"+${ar[0]}+"'/>";
			}
			function addPic2(){
				let d=document.getElementById("pics");
				let im=document.createElement("img");
				im.setAttribute("src",ar[2]);
				im.setAttribute("height","30%");
				im.setAttribute("width","30%");
				document.body.insertBefore(im,d);//通过上级，把元素，加到了d之前
			}
			function clonePics(){
				let d=document.getElementById("pics");
				let d2=d.cloneNode(true);
				document.body.appendChild(d2);
			}
			function delLAstInbody(){
				let last=document.body.lastElementChild;
				console.log(last.nodeName,last.nodeType);
				document.body.removeChild(last);
			}
			//删除pics div中的第一张照片
			function delPicsInDiv(){
				
			}
		</script>
	</head>
	<body>
		 
		<div id="pics"></div>
		<div>
			<button type="button" onclick="addPic()">增加一张照片</button>
			<button type="button" onclick="addPic2()">增加一张照片,到div之前</button>
			
			<button type="button" onclick="clonePics()">克隆div,放到最后</button>
			
			<button type="button" onclick="delLAstInbody()">删除body的最后一个元素</button>
			<button type="button" onclick="delPicsInDiv()">删除div中的最后一张照片</button>
		</div>
	</body>
</html>